<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>PUMA中国官方商城</title>
	<link href="favicon.png"rel="shortcut icon">
	<style type="text/css" media="screen">
		*{
			padding:0;
			margin:0;
		}
		ul li{
			list-style:none;
		}
		#Box{
			width:1348px;
			margin:0 auto;
			overflow:hidden;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="css/nav.css">
	<link rel="stylesheet" type="text/css" href="css/banner.css">
	<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
</head>
<body>
	<div id="Box">
	<!-- - - - - - - - - - - -顶端部分- - - - - - - - - - - - - - - -->
		<div class='top_box'>
		   <p> 
		   	<a href="#">订阅电子邮件&nbsp;&nbsp;&nbsp;&nbsp;|</a> 
			<a href="#">帮助中心&nbsp;&nbsp;&nbsp;&nbsp;|</a>
			<a href="denglu.html">登录&nbsp;&nbsp;&nbsp;&nbsp;|</a>
			<a href="#">注册&nbsp;&nbsp;&nbsp;&nbsp;|</a>
			<a href="#">中国 <b>China</b>
				<a href="#"id="qiu"></a>
				<a href="#"id="xiajian"></a>
			</a> 
		   </p>
		</div>
	    <div id='nav'>
	    	<span id="nav_left">
	    		<ul>
	    			<li id="logo"></li>
	    			<li><a href="#">男子</a>
                         <div></div>
	    			</li>
	    			<li><a href="#">女子</a>
                          <div><span>
                            	<img src="images/nav1.png" height="68" width="140"><a href="#">精彩由你</a><br>
	                         	<img src="images/nav2.png" height="68" width="140">
	                         	<a href="#">街头归你</a><br>
	                         	<img src="images/nav3.png" height="68" width="140"><a href="#">炫彩一夏</a>
                            </span></div>
	    			</li>
	    			<li><a href="#">儿童</a>
                         <div>
                         	<span>
                            	<img src="images/nav4.png" height="68" width="140"><a href="#">精彩由你</a><br>
	                         	<img src="images/nav5.png" height="68" width="140">
	                         	<a href="#">街头归你</a><br>
	                         	<img src="images/nav6.png" height="68" width="140"><a href="#">炫彩一夏</a>
                            </span>
                         </div>
	    			</li>
	    			<li><a href="#">运动</a>
                         <div>
                         	<span>
                            	<img src="images/nav7.png" height="68" width="140"><a href="#">精彩由你</a><br>
	                         	<img src="images/nav8.png" height="68" width="140">
	                         	<a href="#">街头归你</a>
                            </span>
                         </div>
	    			</li>
	    			<li><a href="#">SELECT</a></li>
	    			<li><a href="#">新品</a></li>
	    			<li><a href="#">季末清仓</a></li>
	    		</ul>
	    		<script type="text/javascript">
	    		    var nav_left = document.getElementById("nav_left");
					var lis = nav_left.getElementsByTagName("li");
					var div = nav_left.getElementsByTagName("div");
					for (var i = 0; i < lis.length; i++) {
						lis[i].index = i;
						lis[i].onmouseover = function(){
							for (var i = 0; i < div.length; i++) {
								div[i].style.display="none";
							};
							div[this.index].style.display="block";
						}
						lis[i].onmouseout = function(){
							for (var i = 0; i < div.length; i++) {
								div[i].style.display="none";
							}
						}
					}
				</script>
	    	</span>
	    	<span id="nav_right">
	    	    <a href="#">在线客服</a>
	    	    <a href="#"id="kefu"></a>
	    		<input type="text"placeholder="我要查找....">
	    		<button id="search"><i class="iconfont icon-sousuo"></i></button><a href="#">购物车</a><a href="#"id="shop"></a>
	    	</span>
	    </div>
	    <div id='bot_nav'>
	    	<div id="demo">
			    <div id="demo1">
			        <div>欢迎来到PUMA中国官方商城 即日起至6月20日 任意消费享全店包邮。</div>
			        <div>受峰会影响，5月28日-6月14日发往山东青岛的快件将会延长1-3天。新疆及西藏地区默认仅发EMS，目前无法提供更改及转寄服务。敬请谅解。</div>
			        <div>因系统维护，5月28日起将不可使用银联支付，恢复时间待通知，给您带来不便敬请谅解。</div>
			        <div>因国家税务总局规定，从2018年5月1日起开具的增值税发票税率将调至16%，您可在订单付款时勾选发票（个人或企业），发货七天后在历史订单中下载。</div>
			    </div>
			    <div id="demo2"></div>
			</div>
	    </div>
        <script type="text/javascript">
	        // 滚动字
	        var speed=50;
			var demo=document.getElementById("demo"); 
			var demo2=document.getElementById("demo2"); 
			var demo1=document.getElementById("demo1"); 
			demo2.innerHTML=demo1.innerHTML
			function Marquee(){
			    if((demo2.offsetTop - demo.offsetTop)-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight;
			    else demo.scrollTop++;
			} 
			var MyMar=setInterval(Marquee,speed) 
			demo.onmouseover=function() {clearInterval(MyMar)} 
			demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
	        //吸顶
			var nav = document.getElementById('nav');
			var nav_Top = nav.offsetTop;
			document.onscroll = function(){
				var bTop = document.documentElement.scrollTop;
				if(bTop > nav_Top){
					nav.className = 'fix';
				}else{
					nav.className = '';
				}
			}
	    </script>
	    </div>
	     <!-- - - - - - - - - - - -大图部分- - - - - - - - - - - - - - - -->
        <div id="BigImg">
         	<img src="images/BigImg.jpg">
        </div>
         <!-- - - - - - - - - - - -内容部分- - - - - - - - - - - - - - - -->
        <div id="banner">
         	<div id="banner1">
         		<img src="images/banner2.jpg" height="300" width="590">
         		<img src="images/banner1.jpg" height="300" width="590">
         	</div>
         	<div id="banner2">
         		<h1>观看PUMA视频</h1>
         		<h2>看看PUMA正在发生的精彩片段</h2>
         		<div id="video">
         			 <ul>
				        <li>
					        <embed src="https://p.bokecc.com/flash/player.swf?vid=89558AEBBFC466C09C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_89558AEBBFC466C09C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
		                <li>
					        <embed src="https://p.bokecc.com/flash/player.swf?vid=89558AEBBFC466C09C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_89558AEBBFC466C09C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				        <li>
					        <embed src="https://p.bokecc.com/flash/player.swf?vid=89558AEBBFC466C09C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_89558AEBBFC466C09C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				        <li>
					        <embed src="https://p.bokecc.com/flash/player.swf?vid=B8065FABE3E165FB9C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_B8065FABE3E165FB9C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				        <li>
					        <embed src="https://p.bokecc.com/flash/player.swf?vid=90CFEE08167769B99C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_90CFEE08167769B99C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				        <li>
				        	<embed src="https://p.bokecc.com/flash/player.swf?vid=B8F627FAE49259BD9C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_B8F627FAE49259BD9C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				        <li>
				        	<embed src="https://p.bokecc.com/flash/player.swf?vid=D334478C2CE2942B9C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_D334478C2CE2942B9C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				        <li>
				        	<embed src="https://p.bokecc.com/flash/player.swf?vid=FC4425DED9ADFA669C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_FC4425DED9ADFA669C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				        <li>
				        	<embed src="https://p.bokecc.com/flash/player.swf?vid=DD1C2AEA3716F11F9C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_DD1C2AEA3716F11F9C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				        <li>
				        	<embed src="https://p.bokecc.com/flash/player.swf?vid=558754A95771CCEC9C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_558754A95771CCEC9C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				        <li>
				        	<embed src="https://p.bokecc.com/flash/player.swf?vid=09DB0AC646A3271A9C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_09DB0AC646A3271A9C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				        <li>
				        	<embed src="https://p.bokecc.com/flash/player.swf?vid=41B81EC95021B73A9C33DC5901307461&amp;siteid=BF69E35E4A297EC1&amp;playerid=F7E03A3EBEE21D38&amp;playertype=1&amp;autoStart=false&amp;mediatype=1" width="100%" height="100%" name="cc_41B81EC95021B73A9C33DC5901307461" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">
				        </li>
				    </ul>
				    <ol>
				        <li><img src="images/banner3.jpg"width="221px"></li>
				        <li><img src="images/banner4.jpg"width="221px"></li>
				        <li><img src="images/banner5.jpg"width="221px"></li>
				        <li><img src="images/banner6.jpg"width="221px"></li>
				        <li><img src="images/banner7.jpg"width="221px"></li>
				        <li><img src="images/banner8.jpg"width="221px"></li>
				        <li><img src="images/banner9.jpg"width="221px"></li>
				        <li><img src="images/banner10.jpg"width="221px"></li>
				        <li><img src="images/banner11.jpg"width="221px"></li>
				        <li><img src="images/banner12.jpg"width="221px"></li>
				    </ol>
         		</div> 
				</div>
               <script type="text/javascript">
                var banner2 = document.getElementById("banner2");
			    var ul = banner2.getElementsByTagName("ul")[0];
		        var ol = banner2.getElementsByTagName("ol")[0];
		        var ulLiArr = ul.children;
		        var olLiArr = ol.children;
		        var target = 0;
		        var leader = 0;
		        var timer = null;
		        var arrColor = ["","","","","","","","","",""];
		        for(var i=0;i<arrColor.length;i++){
		            ulLiArr[i].style.backgroundColor = arrColor[i];
		            olLiArr[i].style.backgroundColor = arrColor[i];
		            olLiArr[i].index = i;
		            olLiArr[i].onclick = function () {
		                target = ulLiArr[this.index].offsetTop;
		                clearInterval(timer);
		                timer = setInterval(function () {
		                    var step = (target-leader)/10;
		                    step = step>0?Math.ceil(step):Math.floor(step);
		                    leader = leader + step;
		                    ul.scrollTo(0,leader);
		                    if(Math.abs(target-leader)<=Math.abs(step)){
		                        ul.scrollTo(0,target);
		                        clearInterval(timer);
		                    }
		                },25);
		            }
		        }
				</script>
         	</div>
         	<div id="banner3">
         		<h1>当前热卖</h1>
         		<ul>
         			<li><img src="images/banner13.jpg" height="289px" width="450px"></li>
         			<li>PUMA全新SEFY鞋款来袭</li>
         			<li><a href="#">立即选购</a></li>
         		</ul>
         		<ul>
         			<li><img src="images/banner14.jpg" height="289px" width="450px"></li>
         			<li>PUMA全新SEFY鞋款来袭</li>
         			<li><a href="#">立即选购</a></li>
         		</ul>
         		<ul>
         			<li><img src="images/banner15.jpg" height="289px" width="450px"></li>
         			<li>PUMA全新SEFY鞋款来袭</li>
         			<li><a href="#">立即选购</a></li>
         		</ul>
         		<ul>
         			<li><img src="images/banner16.jpg" height="289px" width="450px"></li>
         			<li>PUMA全新SEFY鞋款来袭</li>
         			<li><a href="#">立即选购</a></li>
         		</ul>
         		<ul>
         			<li><img src="images/banner17.jpg" height="289px" width="450px"></li>
         			<li>PUMA全新SEFY鞋款来袭</li>
         			<li><a href="#">立即选购</a></li>
         		</ul>
         		<ul>
         			<li><img src="images/banner18.jpg" height="289px" width="450px"></li>
         			<li>PUMA全新SEFY鞋款来袭</li>
         			<li><a href="#">立即选购</a></li>
         		</ul>
         	</div>
         	<div id="banner4">
         		<img src="images/banner19.jpg" height="458px" >
         		<div>
         			<h1>潮行街头</h1>
         			<p>线上独家发售</p>
         			<a href="#">查看男款</a>
         			<a href="#">查看女款</a>
         			<a href="#">查看全部</a>
         		</div>
         	</div>
         	<div id="banner5">
         		<h1>新品上市</h1>
         		<div id="lunbo1">
         			<iframe src="lunbo/lunbo.html"frameborder="0"width="1100px"height="500px"scrolling="no"></iframe>
         		</div>
         		<h1>热卖推荐</h1>
         		<div id="lunbo2">
         			<iframe src="lunbo/lunbo2.html"frameborder="0"width="1100px"height="500px"scrolling="no"></iframe>
         		</div>
         </div>
     	 <div id="down">
     		<iframe src="dibu.html"frameborder="0"width="1348px"height="1260px"scrolling="no"></iframe>
     	 </div>
     	 <div id="gotop" class="top">
           <img src="images/Top.jpg">  
           <script src="js/my.js" type="text/javascript"></script>
		     <script>
		        window.onload = function() {
		            var goTop = $("gotop");
		            window.onscroll = function() {
		                scroll().top > 0 ? show(goTop) : hide(goTop);
		                leader = scroll().top;
		                console.log(scroll().top);
		            }
		            var leader = 0,target = 0,timer = null;
		            goTop.onclick = function() {
		                target = 0;
		                timer = setInterval(function() {
		                    leader = leader + (target - leader ) / 10;
		                    window.scrollTo(0,leader);
		                    if(leader == target)
		                    {
		                        clearInterval(timer);
		                    }
		                },20);
		             }
		          }
		    </script>
         </div>
      </div>
</body>
</html>